<template>
  <div class="addcase">
    <div class="addcase-header" v-if="type == 'add'">
      <div
        v-for="(item, index) of head"
        :key="index + 'head'"
        class="module"
        :class="{ 'chose-module': tab == item.value }"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="main" style="display: flex; justify-content: center">
      <el-scrollbar style="height: calc(100vh - 170px)">
        <addstep1 v-show="tab == 1" @next="next" />
        <addstep2 v-show="tab == 2" @next="next" @back="back" />
        <addstep3
          v-show="tab == 3"
          @back="back"
          @submit="submit"
          :param="param"
          ref="step3"
          :id="id"
        />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import addstep1 from "./addStep1.vue";
import addstep2 from "./addStep2.vue";
import addstep3 from "./addStep3.vue";
import { caseupdata } from "@/api/case/case";
export default {
  components: { addstep1, addstep2, addstep3 },
  data() {
    return {
      head: [
        { value: 1, label: "冲突检索" },
        { value: 2, label: "案件类型" },
        { value: 3, label: "案件信息" },
      ],
      tab: 1,
      id: "",
      type: "add",
      param: {
        customerName: "",
        categoryName: "",
        subCategoryName: "",
        thirdCategoryName: "",
        categoryId: "", //案件类型
        registerType: "", //登案类型 1:正式登记 0:备案登记
        subCategoryId: "", ////案件子类型
      },
    };
  },
  computed: {},
  created() {
    console.log(this.$route.query);
    this.type = this.$route.query.type || "add";
    if (this.type == "add") {
      this.tab = 1;
    } else {
      this.tab = 3;
      this.id = this.$route.query.id;
    }
    console.log(this.id);
    this.$route.meta.title = this.$route.query.title;
  },
  mounted() {
    if (this.type == "edit") {
      this.$refs.step3.getDetail();
    }
  },
  methods: {
    next(val) {
      // if (this.tab == 1) {
      //   this.param = { ...val };
      // } else if (this.tab == 2) {
      //   Object.assign(this.param, { ...val });
      // }
      this.param = Object.assign(this.param, val);
      this.tab++;
    },
    back() {
      this.tab--;
    },
    async submit(val) {
      console.log(this.param);
      let data = { ...val };
      data.suitInfo.proxyProcedure = ""
      // data.suitInfo.proxyProcedure = val.suitInfo.proxyProcedure
      //   ? val.suitInfo.proxyProcedure.join(",")
      //   : "";
      data.suitInfo.proxyAgentPermissions = val.suitInfo.proxyAgentPermissions
        ? val.suitInfo.proxyAgentPermissions.join(",")
        : "";
      console.log({ ...data, ...this.param }, this.param);

      await caseupdata({ ...data, ...this.param });

      this.$message.success("操作成功！");
      this.$router.back()
    },
  },
};
</script>

<style lang="scss" scoped>
$--primary-color: #ffffff;
$--chose-color: #007dfa;
$--border-color: #e4ebf0;
.addcase {
  &-header {
    background: $--primary-color;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid $--border-color;
    position: relative;
    .module {
      position: relative;
      flex: 1;
      text-align: center;
      padding: 20px;
    }
    .chose-module {
      background: $--chose-color;
      color: white;
      &::after {
        content: " ";
        display: inline-block;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-right: 30px solid transparent;
        border-left: 30px solid $--chose-color !important;
        position: absolute;
        top: 0px;
        right: -59px;
      }
    }
    :not(:last-child)::after {
      content: " ";
      display: inline-block;
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
      border-right: 30px solid transparent;
      border-left: 30px solid $--primary-color;
      position: absolute;
      top: 0px;
      right: -59px;
    }
    :not(:last-child)::before {
      content: " ";
      display: inline-block;
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
      border-right: 30px solid transparent;
      border-left: 30px solid $--border-color;
      position: absolute;
      top: 0px;
      right: -62px;
    }
  }
}
</style>
